<template>
    <div class="customBox modelBox">
        <h3 class="title">
            全局缓存
            <el-button style="float: right;" type="success" size="mini" round @click="newCache" circle>
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>

        <el-row class="modalItem" v-for="(item, key) in cacheObj" :key="key">
            <el-col :span="24" class="modelName">键值: {{key}}</span>
            </el-col>
            <el-col :span="24" class="modelName">当前缓存值: {{item}}</span>
            </el-col>
            <el-col :span="24">
                <el-button class="miniButton" size="mini" type="danger" icon="el-icon-delete" round
                    @click="deleteCache(item, key)">删除
                </el-button>
                <el-button class="miniButton" size="mini" type="warning" icon="el-icon-edit-outline"
                    @click="editCache(item, key)" round>修改
                </el-button>
            </el-col>
        </el-row>

        <el-dialog title="编辑" append-to-body :class="theme" :visible.sync="showValueEditor" width="600px">
            <el-row :gutter="5" style="padding: 0 0 5px 0;">
                <el-col :span="3" style="line-height: 40px;">key值:</el-col>
                <el-col :span="12">
                    <el-input :disabled="readonly" v-model="activeObject.key" placeholder="key值"></el-input>
                </el-col>
            </el-row>
            <el-input class="CodeMirror-custom" type="textarea" :rows="10" resize="none" v-model="activeObject.value">
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="samll" @click="saveValue">确定</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                readonly: true,
                activeObject: {
                    key: '',
                    value: ''
                },
                showValueEditor: false,
            }
        },
        computed: {
            ...mapState("theme", {
                theme: state => state.theme,
            }),
            ...mapState("cache", {
                cacheObj: state => state.cacheObj,
            }),
        },
        methods: {
            deleteCache(item, key) {
                this.$confirm('', '是否删除该缓存？', {
                    customClass: this.theme
                }).then(_ => {
                    console.log(key);
                    this.$store.dispatch('cache/deleteCacheKey', {
                        key: key
                    });
                }).catch(_ => { });
            },
            editCache(item, key) {
                this.readonly = true;
                this.showValueEditor = true;
                this.activeObject = {
                    key: key,
                    value: item
                };
            },
            newCache() {
                this.readonly = false;
                this.showValueEditor = true;
                this.activeObject = {
                    key: '',
                    value: ''
                };
            },
            saveValue() {
                this.showValueEditor = false;
                this.$store.dispatch('cache/setFromEdit', this.activeObject);
            },
        },
    };
</script>